<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    >
  </van-search>
  <ul v-if="value">
    <li v-for="item in computedList" :key="item">
      <p><img :src="item.poster" /></p>
      <p>{{ item.name }}</p>
    </li>
  </ul>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { ref } from "vue";
import http from "../util/http.js";
export default {
  setup() {
    const router = useRouter();
    const value = ref("");
    const onSearch = () => console.log("search");
    const onCancel = () => router.push("/show");

    return {
      value,
      onSearch,
      onCancel,
    };
  },
  data() {
    dataList: [];
  },
  mounted() {
    // console.log("data",JSON.parse(this.$route.query.data));
    http({
      url: `/api/v3/activities?pageIndex=1&categoryId=1&time=&sort=&seatMap=false&highestPrice=&lowestPrice=`,
    }).then((res) => {
      console.log(res.data.data);
      this.dataList = res.data.data;
    });
  },
  computed:{
  computedList(){
    return this.dataList.filter(item=>item.name.toUpperCase().includes(this.value.toUpperCase()))
  }
  }
};
</script>
<style lang="scss" scoped>
li {
  display: flex;
  padding: 10px;
  height: 61px;
  img {
    width: 44px;
    height: 58px;
  }
}
</style>
